<template>
	<view class="i-image" :class="['layout' + option.layoutType]" :style="[bodyStyle]">
		<image  @tap="jumpLink(item.link)" class="img-item" mode="widthFix" :class="[imgClass]" :style="imgStyle"  v-for="(item, index) in option.imgList" :key="index" :src="$fullLink(item.url)" >
		</image>
	</view>
</template>

<script lang="ts" setup>
	import {computed} from 'vue'
	import {useLayoutCompoments} from './hooks'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import type {pageLink} from './type'
	
	type ImgItem = {
		url:string
		link:pageLink
	}
	
	const props = withDefaults(defineProps<{
		option : {
			styleType : 0 | 1 | 2
			layoutType: 1|2
			imgList: ImgItem[]
			backgroundColor: string
			imageMargin: number
			paddingTop: number
			paddingBottom: number
			paddingX: number
			radiusTop: number
			radiusBottom: number
		}
	}>(), {
		option: () => ({
			styleType: 0,
			layoutType: 1,
			imgList: [],
			backgroundColor: 'rgba(245, 246, 249, 1)',
			imageMargin: 0,
			paddingTop: 12,
			paddingBottom: 12,
			paddingX: 10,
			radiusTop: 0,
			radiusBottom: 0,
		})
	})
	
	
	const ctx = useCurrentInstance()
	
	const {viewStyle:bodyStyle,bodyClass:imgClass,bodyBoxStyle,jumpLink} = useLayoutCompoments(ctx,props.option)
	

	
	const imgStyle = computed(() => {
		return [{
			'--margin':props.option.imageMargin+'px',
			
		},bodyBoxStyle.value]
	})

</script>

<style scoped lang="scss">
.layout1 {
	.img-item {
		width: 100%;
		// height: 100%;
		// margin-bottom: var(--margin);
		// &:last-child{
		// 	margin-bottom: 0 !important;
		// }
	}
}
.layout2 {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	.img-item {
		width: calc((100% - var(--margin))/2) !important;
		margin-right: var(--margin);
		&:nth-child(2n){
			margin-right: 0 !important;
		}
	}
}

</style>
